<template>
	<view class="oa-content tn-safe-area-inset-bottom">
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 选择房间 -->
			<uni-data-picker v-model="selectedValue" :localdata="array" @change="bindPickerChange" popup-title="请选择"
				placeholder="请选择房间">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item tn-flex-1">
						<view class="tn-text-bold tn-text-lg">
							选择房间 <text class="tn-color-black tn-padding-left-xs">*</text>
						</view>
						<!-- <view class="tn-color-black tn-padding-top-xs">
			            {{ selectedValue ? selectedValue.text : '请选择房间' }}
			          </view> -->
						<view class="tn-color-black tn-padding-top-xs">
							{{ selectedValue ? selectedValue : '请选择房间' }}
						</view>

					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</uni-data-picker>

			<!-- 选择日期 -->
			<view class="">
				<tn-picker mode="time" v-model="show" :params="params" :startYear="startYear" :endYear="endYear"
					@confirm="confirmPicker"></tn-picker>
			</view>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="showPicker">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						开始时间 <text class="tn-color-black tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs" v-if="result===''">
						请选择
					</view>
					<view class="tn-padding-top-xs" v-else>
						{{ result }}
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-time tn-padding-top"></view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">想说点什么 *</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey">
					<text class="tn-padding-xs">500字内</text>
					<text class="tn-icon-keyboard-circle"></text>
				</view>
			</view>

			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
				<textarea v-model="pendingTaskList.remark" maxlength="500" placeholder="写下一句简短的标题"
					placeholder-style="color:#AAAAAA" style="height: 160rpx;"></textarea>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-image" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">发点什么图咧 *</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空上传</text>
					<text class="tn-icon-delete"></text>
				</view>
			</view>

			<view class="tn-margin-left tn-padding-top-xs">
				<view class="upload-container">
					<view v-for="(img, index) in imageList" :key="index" class="image-preview">
						<image :src="img" mode="aspectFill" class="preview-image"></image>
						<view class="delete-btn" @click="deleteImage(index)">删除</view>
					</view>
					<view v-if="imageList.length < 9" class="upload-btn" @click="chooseImage">
						<text class="icon-add">+</text>
						<text>上传图片</text>
					</view>
				</view>
			</view>
			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#000000" padding="40rpx 0" width="70%" fontBold @click="uploadImages">
						<text class="tn-color-white">发 布 待 办 </text>
					</tn-button>
				</view>
			</view>

		</view>

		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js';
	import {
		getToken
	} from "@/utils/auth";
	import {
		uploadImage
	} from "@/api/system/user";
	import {
		addPendingTask
	} from "@/api/house/PendingTask/index";
	import {
		getTenantInformationTreeText
	} from "@/api/house/room/index";

	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		data() {
			return {
				imageList: [],
				upinagePath: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				index: 99,
				show: false,
				result: '',
				startYear: 2023,
				endYear: 2100,
				array: [],
				pendingTaskList: {
					roomId: '',
					pendingTime: null,
					photo: '',
					remark: ''
				},
				selectedValue: null,
				selectedValueTwo: null,
			};
		},
		created() {
			this.getTenantInformationTreelist();
		},
		methods: {
			bindPickerChange(e) {
				// 确保e.detail.value是一个数组，并且至少有一个元素
				if (Array.isArray(e.detail.value) && e.detail.value.length > 0) {
					console.log("e.detail.value", e.detail.value)
					// 选择数组中的第一个元素作为selectedValue
					this.selectedValue = e.detail.value[e.detail.value.length - 1].text;
					this.selectedValueTwo = e.detail.value[e.detail.value.length - 1];
					console.log("selectedValueTwo", this.selectedValueTwo)
				} else {
					// 如果e.detail.value不是数组或者为空，则将selectedValue设置为null
					this.selectedValue = null;
				}
				console.log("this.selectedValue", this.selectedValue);
			},

			getTenantInformationTreelist() {
				getTenantInformationTreeText().then(res => {
					this.array = res.data; // 更新房间列表
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.imageList.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				});
			},
			deleteImage(index) {
				this.imageList.splice(index, 1);
			},
			uploadImages() {
				this.upinagePath = [];
				let promises = [];
				this.imageList.forEach((filePath) => {
					let data = {
						name: 'file',
						filePath: filePath
					};
					promises.push(uploadImage(data).then(res => {
						this.upinagePath.push(res.fileName);
					}));
				});
				Promise.all(promises).then(() => {
					this.upload(this.upinagePath);
				}).catch(err => {
					console.error("Error uploading images:", err);
				});
			},
			showPicker() {
				this.show = true;
			},
			confirmPicker(event) {
				this.result =
					`${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour + ':' : ''}${this.params.minute ? event.minute : ''}`;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			upload(res) {
				// 检查选中的房间ID是否包含字母
				if (/[a-zA-Z]/.test(this.selectedValueTwo.value)) {
					this.$modal.msgError("不能只选择小区");
					return; // 如果包含字母，则终止函数执行
				}
				this.pendingTaskList.roomId = this.selectedValueTwo.value; // 使用选中的房间 ID
				console.log("this.pendingTaskList.roomId", this.pendingTaskList.roomId)
				this.pendingTaskList.pendingTime = this.result;
				this.pendingTaskList.photo = res.join(',');
				addPendingTask(this.pendingTaskList).then(res => {
					if (res.code === 200) {
						this.$modal.msgSuccess("发布成功");
						this.goBack();
					}
				});
			},
			clear() {
				this.imageList = []; // 清空图片列表
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
	}

	.upload-container {
		display: flex;
		flex-wrap: wrap;
	}

	.image-preview {
		position: relative;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.preview-image {
		width: 100px;
		height: 100px;
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 2px 5px;
		cursor: pointer;
	}

	.upload-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
		border: 1px dashed #c0c0c0;
		cursor: pointer;
	}

	.icon-add {
		font-size: 24px;
		margin-bottom: 5px;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		// background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 180rpx;
		height: calc(220rpx + env(safe-area-inset-bottom) / 2);
		height: calc(220rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		max-width: 640px;
		margin: 0 auto;
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>